<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width"/>

    <title>ONLYOFFICE Document Editors</title>
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            -ms-content-zooming: none;
        }

        #office_frame {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            border: none;
            display: block;
        }
    </style>
</head>

<body>

<form id="office_form" name="office_form" target="office_frame"
      action=""
      method="post">
    <input name="access_token" value="<%= token %>" type="hidden"/>
    <input name="access_token_ttl" value="<%= tokenTtl %>" type="hidden"/>
</form>

<span id="frameholder"></span>
<script type="text/javascript" src="jquery-3.7.1.min.js"></script>
<script type="text/javascript">
    function getQueryString(name) {
    const query = window.location.search.substr(1);
     const params = query.split('&');
      for (let i = 0; i < params.length; i++) {
      const param = params[i].split('=');
      if (param[0] === name) {
        return decodeURIComponent(param[1]);
      }
   }
   return null;
}
function getSuffix(tmpurl){
   let index= tmpurl.lastIndexOf("?")
   let path=tmpurl
    if(index>0){
      path=tmpurl.substring(0,index)
    }
    index=path.lastIndexOf(".")

    if(index>0){
      return path.substring(index+1)
    }
    return null
}
</script>
<script type="text/javascript">
    function loadIframe(id,myurl){
    var uri=window.location.protocol+"//"+window.location.hostname+":8080/wopi/files/"+id;

    suffix=getSuffix(myurl)
     uri=encodeURIComponent(uri)
     let viewmodel=''
     let viewparammodel=getQueryString('viewmodel')
     if(viewparammodel){
       if(viewparammodel=='embed'){
         viewmodel='embed=1'
       }else if(viewparammodel=='mobile'){
         viewmodel='mobile=1'
       }
     }

     //let commparam=viewmodel+'&rs=zh-CN&ui=zh-CN'
     let commparam='rs=zh-CN&ui=zh-CN'

     let hostUrl='http://192.168.144.16:9999'
     var officeserverurl
     if("ppt" == suffix || "pptx"== suffix){
       officeserverurl=hostUrl+'/hosting/wopi/slide/view?'+commparam+'&wopisrc='+uri
     }else if("doc"==suffix || "docx" == suffix){
       officeserverurl=hostUrl+'/hosting/wopi/word/view?'+commparam+'&wopisrc='+uri
     }else{
       alert("暂不支持格式")
     }


       document.getElementById('office_form').action = officeserverurl;
       var frameholder = document.getElementById('frameholder');
        var office_frame = document.createElement('iframe');
        office_frame.name = 'office_frame';
        office_frame.id = 'office_frame';

        office_frame.title = 'Office Frame';
        office_frame.setAttribute('allowfullscreen', 'true');

        office_frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox allow-downloads allow-modals');
        office_frame.setAttribute('allow', 'autoplay camera microphone display-capture');
        frameholder.appendChild(office_frame);

        document.getElementById('office_form').submit();
        }
    $(document).ready(function(){

      var myurl=getQueryString('myurl')
       console.log("myurl="+myurl)
      if(!myurl){
            alert('请输入myurl')
       }
       $.get("/wopi/getfileid?url="+encodeURIComponent(myurl),function(fileId,status){
       loadIframe(fileId,myurl)

      });



    });


</script>

</body>

</html>